<script setup>
import { ref, watchEffect } from "vue";
import * as echarts from "echarts";
import { max } from "lodash-es";

const props = defineProps(["data", "x"]);
const chartRef = ref(null);

watchEffect(() => {
  if (!chartRef.value) return;
  const chart = echarts.init(chartRef.value);
  const option = {
    tooltip: {},
    grid: {
      width: "96%",
      height: "80%",
      x: 60,
      y: 36,
    },
    xAxis: {
      type: "category",
      data: props.x,
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        interval: 0,
        width: 55,
        overflow: "break",
        ellipsis: "...",
        textStyle: { color: "#fff" },
      },
      axisLine: {
        lineStyle: {
          color: "#3D4985",
        },
      },
    },
    yAxis: [
      {
        name: "单位/(人)",
        nameTextStyle: {
          color: "rgba(201,233,248,0.6)",
          fontSize: 12,
        },
        type: "value",
        max: max(props.data) + 1,
        axisTick: { show: false },
        axisLabel: {
          show: true,
          textStyle: { color: "#fff" },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#3D4985",
            fontSize: "24px",
            fontWeight: 400,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#3D4985",
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        data: props.data,
        barWidth: "30px",
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(45, 255, 248, 0.80)",
              },
              {
                offset: 1,
                color: "rgba(45, 255, 248, 0.10)",
              },
            ],
          },
          borderRadius: 0,
        },
      },
      // 柱体顶点
      {
        type: "scatter",
        name: "top",
        yAxisIndex: 0,
        data: props.data,
        symbol: "rect",
        symbolSize: [31, 2],
        itemStyle: {
          color: "#0c2e4e",
        },
        hoverAnimation: false,
        silent: true,
        symbolOffset: ["0", "3"], // 位置
      },
    ],
  };

  chart.setOption(option);
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>
